What is ‘this’?
A property of an execution context (global, function, or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value. (MDN)
Let’s look at some analogies
jacket.this = you
jacket button.this = jacket
the plastic part of the button.this = jacket button
Make sense?
What is ‘this’ in your browser? Let’s see!
console.log(this) [Log] Window {listeners: Object, initPagination: function, timeAgo: function, sendFetch: function, setCurrentUserToNavBar: function, …}…
It’s the window!
How do we use ‘this’?
There are many uses for ‘this.’ I also am aware that there are specific considerations when using ‘this’ in functions depending on whether they are arrow functions or “use strict” is on.
Let’s talk about the most common use case I am aware of.
‘this’ in Classes
A JavaScript class is an object factory. The constructor is the part that makes the object.
Let’s make two person objects using the Person class and assign them a name using ‘this.’
class Person {
constructor(name) {
this.name = name;
}
sayHi() {
return (`Hi, I'm ${this.name}`);
}
}
const Person1 = new Person ("Bob");
const Person2 = new Person ("Jill");
console.log(Person1.name);
// Bob
console.log(Person2.name);
// Jill
console.log(Person1.sayHi());
// Hi, I'm Bob
console.log(Person2.sayHi());
// Hi, I'm Jill
I hope that helped you understand what ‘this’ is.
My favorite use of ‘this’ is in linked lists… but that is a topic for a different blog post!
Here are some resources to learn more about ‘this.’
Did you enjoy this article? Or did I get something wrong?
Feel free to contact me using my website.
Have a fantastic day!